<template>
  <div>
      <!-- 搜索区域 -->
      <div class="search">
        <el-input prop="way" v-model="way" style="width:500px;" placeholder="请输入内容"  clearable @clear="getUserList"></el-input>
        <el-button  type="primary" @click="searchclick">搜索</el-button>
        <el-button type="primary"  @click="addclick">添加角色</el-button>
      </div>
  <div>
  <!-- 表格内容 -->
  <el-scrollbar style="height:100%;width: 960px"> <!-- 滚动条 -->
  <!-- 注意需要给 el-scrollbar 设置高度，判断是否滚动是看它的height判断的 -->
    <el-row  style="height: 400px;width: 1000px;"><!--可显示区域-->
  <el-table
    :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
    style="width: 99%"
    :default-sort = "{prop: 'user_name', order: 'descending'}"
    :model="tableForm">
    <el-table-column
      label="用户名"
      prop="user_name"
      width="180"
      sortable>
      <template slot-scope="scope">
        <i class="el-icon-s-custom"></i>
        <span style="margin-left: 10px">{{ scope.row.user_name  }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="电话"
      width="180"
      :formatter="formatter">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span size="medium">{{ scope.row.user_phone }}</span>
          </div>
      </template>
    </el-table-column>
    <el-table-column
      label="密码"
      width="200">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span size="medium">{{ scope.row.user_password }}</span>
          </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-row>
  </el-scrollbar>
  <!-- 分页器 -->
  <div class="block" style="margin-top:15px;">
      <el-pagination align='left'
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page="currentPage" 
        :page-sizes="[1,5,10]" :page-size="pageSize" 
        layout="total, sizes, prev, pager, next, jumper" 
        :total="tableData.length">
      </el-pagination>
  </div>
  </div>
  <!-- 抽屉 -->
  <el-drawer
    title="添加角色"
    :visible.sync="drawer"
    :direction="rtl"
    :before-close="drawerClose">
  <div style="padding:10px 10px">
      <!-- 添加用户表单 -->
      <el-form size="mini">
        <el-form-item Label="用户名:">
          <span>用户名: </span><el-input v-model="name" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item class="submit">
            <el-button type="primary" @click="submitForm()">添加</el-button>  
            <el-button>重置</el-button>
        </el-form-item>
      </el-form>
  </div>
  </el-drawer>
  </div>
</template>

<script>
export default {
    data() {
      return {
        drawer:false,
        name:'',
        way:'',
        tableData: [],
        // 默认显示第一条
        currentPage: 1, // 当前页码
        total: 0, // 总条数
        pageSize: 5 // 每页的数据条数
      }
    },
    // 渲染表格
    created(){
        this.getTableData()
    },
    methods: {
      // 实现搜索功能
      searchclick(){
        this.getnewTableData()
      },
      // 重新获取查询后的表格数据
      async getnewTableData(){
        const {data:res}=await this.$http.get('/javaweb/search',{params:{way:this.way}})
        if(res.code!==200){
          return this.$message.error('查询失败！')
        }
        this.tableData=res.data
        this.$message.success('查询成功！')
      },
      formatter(row, column) {
        return row.address;
      },
      // 初始化表格数据
      async getTableData(){
        const {data:res}=await this.$http.get('/javaweb/searchall')
        if(res.code!==200){
          return this.$message.error('获取失败！')
        }
        this.tableData=res.data
      },
      handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.currentPage = 1;
          this.pageSize = val;
      },
      handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.currentPage = val;
      },
      addclick(){
          this.drawer=true
      },
      handleEdit(index, row) {
          console.log(index, row);
      },
      async handleDelete(index, row) {
        await this.$confirm("是否确定删除？")
        const username=row.user_name;
        const {data:res}=await this.$http.get('/javaweb/delete',{params:{username:username}})
        if(res.code==200){
          this.$message.success("删除成功！")
          this.getTableData()
        }
        else{
          this.$message.error("删除失败！")
        }
        console.log(index, row);
      },
      drawerClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  }
}
</script>

<style scoped lang="less">
.submit{
    text-align: center;
}
</style>